<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>poly-gon</title>
  </head>
  <body>
    <!-- 
    1. poly-gon (多边形)
    1. points 是 poly-gon（多边形）的基本属性
    2. points 定义了多边形的各个顶点的 x 和 y 坐标
    3. 坐标之间用空格隔开
    4. 最后一个坐标与第一个坐标相同，会自动闭合
    -->
    <svg
      width="200"
      height="200"
      viewBox=""
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" style="fill: pink" />
      <polygon points="30,10 10,190 50,190" style="fill: green; stroke: red" />
      <polygon
        points="70,10 60,190 100,190 90,10"
        style="fill: greenyellow; stroke: red"
      />
      <polygon
        points="110,30 110,60 131,81 152,60 152,30 131,9"
        style="fill: greenyellow; stroke: red"
      />
      <polygon
        points="110,30 110,60 131,81 152,60 152,30 131,9"
        style="fill: greenyellow; stroke: red"
      />
      <polygon
        points="150,110 125,190 190,135 110,135 175,190"
        style="fill: greenyellow; stroke: red; fill-rule: evenodd"
      />
      <!-- 
        1. fill-rule：计算图形的填充规则
        2. fill-rule 的值有两个：
          1. nonzero：默认值，非零环绕填充规则（图形中任意一点，以该点为起点向任意方向发射无限长射线。路径从左到右（顺时针）与射线相交，则计数 +1。路径从右到左（逆时针）与射线相交，则计数 -1。统计所有路径后，计数为 0 ，则该点属于外部，不为 0，则属于内部）
          2. evenodd：奇偶环绕填充规则（图形中任意一点，以该点为起点向任意方向发射无限长射线。统计图形所有路径中，与射线相交的数量，若为奇数，则在内部。若为偶数，则在外部）
       -->
    </svg>
  </body>
</html>
